<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('用户管理')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>

    <link th:href="@{/testDate/main.css}" rel='stylesheet'/>
    <link th:href="@{/assets/libs/layui/css/layui.css}" media="all" rel="stylesheet">

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body class="gray-bg">
<div class="ui-layout-west">
    <div class="main-content">
        <div class="box box-main">
            <div class="box-header">
                <div class="box-title">
                    <i class="fa fa-navicon"></i> 部门
                </div>
                <div class="box-tools pull-right">
                    <a type="button" class="btn btn-box-tool menuItem" href="#" onclick="dept()" title="部门管理">
                        <i class="fa fa-edit"></i>
                    </a>
                    <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display: none">
                        <i class="fa fa-chevron-up"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠">
                        <i class="fa fa-chevron-down"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门">
                        <i class="fa fa-refresh"></i>
                    </button>
                </div>
            </div>
            <div class="ui-layout-content">
                <div id="tree" class="ztree"></div>
            </div>
        </div>
    </div>
</div>
<div class="container-div ui-layout-center">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="user-form">
                <input type="hidden" id="deptId" name="deptId">
                <input type="hidden" id="parentId" name="parentId">
                <div class="select-list">
                    <ul>
                        <li v-if="checkedSearch.indexOf('登录名称') != -1">
                            登录名称：<input type="text" name="loginName"/>
                        </li>
                        <li v-if="checkedSearch.indexOf('用户名称') != -1">
                            用户名称：<input type="text" name="userName"/>
                        </li>
                        <li v-if="checkedSearch.indexOf('手机号码') != -1">
                            手机号码：<input type="text" name="phonenumber"/>
                        </li>
                        <li v-if="checkedSearch.indexOf('用户状态') != -1">
                            用户状态：
                            <select name="status" th:with="type=${@dict.getType('sys_normal_disable')}">
                                <option value="">所有</option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}"></option>
                            </select>
                        </li>
                        <li class="select-time" v-show="checkedSearch.indexOf('创建时间') != -1">
                            <label>创建时间：</label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间"
                                   name="params[beginTime]"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间"
                                   name="params[endTime]"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                            <a class="btn btn-success btn-rounded btn-sm" @click="moreSearch()"><i
                                    class="fa fa-edit"></i>&nbsp;更多</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <el-dialog title="搜索条件" width="200px" :visible.sync="showMore" append-to-body="true">
            <el-row>
                <el-col :span="24">
                    <el-checkbox style="margin-left: 28px" :indeterminate="isIndeterminate" v-model="checkAll"
                                 @change="handleCheckAllChange">全选
                    </el-checkbox>
                    <el-checkbox-group v-model="checkedSearch" @change="handleCheckedSearchChange">
                        <el-checkbox style="display: block;margin-left: 28px" v-for="item in searches" :label="item"
                                     :key="item" v-cloak>{{item}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-col>
            </el-row>
        </el-dialog>
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.addTab()" shiro:hasPermission="system:user:add">
                <i class="fa fa-plus"></i> 新增
            </a>
            <a class="btn btn-primary btn-edit disabled" onclick="$.operate.editTab()"
               shiro:hasPermission="system:user:edit">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger btn-del disabled" onclick="$.operate.removeAll()"
               shiro:hasPermission="system:user:remove">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-info" onclick="$.table.importExcel()" shiro:hasPermission="system:user:import">
                <i class="fa fa-upload"></i> 导入
            </a>
            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:user:export">
                <i class="fa fa-download"></i> 导出
            </a>
            <a class="btn btn-primary" onclick="$.table.print()">
                <i class="fa fa-plus"></i> 打印
            </a>
            <a class="btn btn-info btn-lg " onclick="bit()"><!--shiro:hasPermission="basics:purchase:bit"-->
                <i class="fa fa-500px"></i> 生成二维码
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true" style="white-space: nowrap"></table>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:user:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:user:remove')}]];
    var resetPwdFlag = [[${@permission.hasPermi('system:user:resetPwd')}]];
    var prefix = ctx + "system/user";

    const searchOptions = ['登录名称', '用户名称', '手机号码', '用户状态', '创建时间'];

    var app = new Vue({
        el: '.container-div',
        data: {
            showMore: false,
            checkAll: false,
            checkedSearch: ['登录名称', '用户名称', '手机号码', '用户状态'],
            searches: searchOptions,
            isIndeterminate: true
        },
        methods: {
            moreSearch() {
                this.showMore = true;
            },
            handleCheckAllChange(val) {
                this.checkedSearch = val ? searchOptions : [];
                this.isIndeterminate = false;
            },
            handleCheckedSearchChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.searches.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.searches.length;
            }
        }
    })
    var sleep = function(time) {
        var startTime = new Date().getTime() + parseInt(time, 10);
        while(new Date().getTime() < startTime) {}
    };
    function bit() {


        var rows = $.common.isEmpty($.table._option.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns($.table._option.uniqueId);

        var split = rows.toString().split(",");

        if(split==''){
            $.modal.alert("请选择数据")
        }else{
            for (var i=0; i<split.length; i++)
            {
                window.location.href="http://localhost:8000/system/user/qr?ids="+split[i]+""
                sleep(1500)

            }
        }







        /* $.ajax({
             url: "http://localhost:8000/system/wareInfo/qr",
             data: {ids: rows.toString()},
             responseType: 'ms-stream',
             success: function f(data) {


                 const url = window.URL.createObjectURL(new Blob([data], {type: "image/png"}))
                 const link = document.createElement('a')
                 link.style.display = 'none'
                 link.href = url
                 link.setAttribute('download', '1.png')
                 document.body.appendChild(link)
                 link.click()
                 document.body.removeChild(link)




             }

         });*/


    }

    $(function () {
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({initClosed: panehHidden, west__size: 185});
        queryUserList();
        queryDeptTree();
    });

    function queryUserList() {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            importUrl: prefix + "/importData",
            importTemplateUrl: prefix + "/importTemplate",
            modalName: "用户数据",
            showExport: false,
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'userId',
                    title: '用户ID',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'loginName',
                    title: '登录名称',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'userName',
                    title: '用户名称',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'dept.deptName',
                    title: '部门',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'email',
                    title: '邮箱',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'phonenumber',
                    title: '手机',
                    align: 'center',
                    visible: true
                },
                {
                    visible: editFlag == 'hidden' ? false : true,
                    title: '用户状态',
                    align: 'center',
                    formatter: function (value, row, index) {
                        return statusTools(row);
                    }
                },
                {
                    field: 'remark',
                    title: '备注',
                    align: 'center',
                    visible: true
                },
                {
                    field: 'createTime',
                    title: '创建时间',
                    align: 'center',
                    sortable: true
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.editTab(\'' + row.userId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.userId + '\')"><i class="fa fa-remove"></i>删除</a> ');
                        actions.push('<a class="btn btn-info btn-xs ' + resetPwdFlag + '" href="#" onclick="resetPwd(\'' + row.userId + '\')"><i class="fa fa-key"></i>重置</a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    }

    function queryDeptTree() {
        var url = ctx + "system/dept/treeData";
        var options = {
            url: url,
            expandLevel: 2,
            onClick: zOnClick
        };
        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            $("#deptId").val(treeNode.id);
            $("#parentId").val(treeNode.pId);
            $.table.search();
        }
    }

    $('#btnExpand').click(function () {
        $._tree.expandAll(true);
        $(this).hide();
        $('#btnCollapse').show();
    });

    $('#btnCollapse').click(function () {
        $._tree.expandAll(false);
        $(this).hide();
        $('#btnExpand').show();
    });

    $('#btnRefresh').click(function () {
        queryDeptTree();
    });

    /* 用户管理-部门 */
    function dept() {
        var url = ctx + "system/dept";
        createMenuItem(url, "部门管理");
    }

    /* 用户管理-重置密码 */
    function resetPwd(userId) {
        var url = prefix + '/resetPwd/' + userId;
        $.modal.open("重置密码", url, '800', '300');
    }

    /* 用户状态显示 */
    function statusTools(row) {
        if (row.status == 1) {
            return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(\'' + row.userId + '\')"></i> ';
        } else {
            return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(\'' + row.userId + '\')"></i> ';
        }
    }

    /* 用户管理-停用 */
    function disable(userId) {
        $.modal.confirm("确认要停用用户吗？", function () {
            $.operate.post(prefix + "/changeStatus", {"userId": userId, "status": 1});
        })
    }

    /* 用户管理启用 */
    function enable(userId) {
        $.modal.confirm("确认要启用用户吗？", function () {
            $.operate.post(prefix + "/changeStatus", {"userId": userId, "status": 0});
        })
    }
</script>
</body>
<form id="importForm" enctype="multipart/form-data" class="mt20 mb10" style="display: none">
    <div class="col-xs-offset-1">
        <input type="file" id="file" name="file"/>
        <div class="mt10 pt5">
            <input type="checkbox" id="updateSupport" name="updateSupport" title="如果登录账户已经存在，更新这条数据。">
            是否更新已经存在的用户数据
            <a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 下载模板</a>
        </div>
        <font color="red" class="pull-left mt10">
            提示：仅允许导入“xls”或“xlsx”格式文件！
        </font>
    </div>
</form>
</html>
